移动端真机调试
模拟器无法完全还原真机的表现,最终效果需要在真实设备上验证。
调试方法
| 方法 | 适用场景 | 操作方式 |
|---|---|---|
| Chrome Remote Debug | Android调试 | USB连接 + chrome://inspect |
| Safari Web Inspector | iOS调试 | Mac + Safari开发者菜单 |
| Vite --host | 局域网访问 | vite --host 手机访问IP地址 |
| Charles/Fiddler | 抓包分析 | 代理拦截请求 |
| vConsole | 线上调试 | 页面内嵌调试面板 |
Vite局域网调试
# 启动开发服务器并暴露到局域网
vite --host 0.0.0.0 --port 3000
bash
手机和电脑在同一局域网内,浏览器访问http://电脑IP:3000即可。
Android Chrome调试
- 手机开启USB调试模式
- USB连接电脑
- Chrome访问
chrome://inspect - 找到设备并点击inspect
iOS Safari调试
- iPhone开启Web检查器(设置 → Safari → 高级)
- USB连接Mac
- Safari → 开发 → 选择设备
↑